<script setup>
import { defineProps, inject, reactive, ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import dynamicIcon from "@/components/custom/DynamicIcon.vue";
import { getCustomerInfoTemplate } from "@/api/customer";
import { Message } from "@arco-design/web-vue";

const modalsState = inject("modalsState");

const { t } = useI18n();
const props = defineProps({
  customerList: {
    type: Array,
    default: [],
  },
  modalTitle: {
    type: String,
    default: null,
  },
  modalWidth: {
    type: Number,
    default: 760,
  },
});
const customerInfoForm = ref([]);
const formRef = ref(null);

const loading = ref(false);
const form = reactive({
  policyAgree: false,
  email: "",
});

const handleSubmit = ({ values, errors }) => {
  console.log("values:", values, "\nerrors:", errors);
  if (!errors && !form.policyAgree) {
    Message.error(t("customer.agreePolicy"));
    return false;
  }
};

getCustomerInfoTemplate().then((res) => {
   const list = res.data;
   res.data[0].list.forEach(element => {
      form[element.field] = element.value; 
   });
   customerInfoForm.value = res.data;
});


</script>

<template>
  <div class="h-full relative">
    <a-drawer
      :width="modalWidth"
      :mask-closable="false"
      :title="$t('customer.createCustomer')"
      v-model:visible="modalsState.showCustomerCreate"
      :footer="false"
    >
      <div class="relative mt-5">
        <a-form :model="form" ref="formRef" @submit="handleSubmit">
          <div class="m-5">
            <a-descriptions
              v-for="(row, index) in customerInfoForm"
              :key="index"
              style="margin-bottom: 25px"
              :title="t(row.itemName)"
              :column="{ xs: 2, sm: 4, md: 4, lg: 4 }"
              layout="inline-vertical"
              bordered
            >
              <a-descriptions-item
                v-for="(item, index2) of row.list"
                :key="index2"
                :span="item.span"
              >
                <template v-slot:label>
                  {{ t(item.label)}}
                  <span v-if="item.rules.length > 0 && item.rules[0].required" class="text-red-500">*</span>
                  <a-tooltip v-if="item.tips" :content="t(item.tips)">
                    <icon-question-circle />
                  </a-tooltip>
                </template>
                <template v-slot:default>
                  <a-form-item
                    :field="item.field"
                    :hide-label="true"
                    :rules="item.rules"
                    class="customer-create-item flex items-center relative mb-0"
                  >
                    <a-input-group v-if="['phone'].includes(item.type)">
                      <a-select
                        :options="item.options"
                        size="small"
                        :style="{ width: '150px' }"
                        class="border-0"
                        v-model="form.countryCode"
                        style="border-right: none; padding-left: 10px"
                      />
                      <a-input
                        class="bg-white hover:bg-white border-0"
                        style="padding-left: 5px"
                        :placeholder="t('placeholder.prefix') + t(item.label)"
                        v-model="form[item.field]"
                      />
                    </a-input-group>
                    <a-input
                      v-if="['text'].includes(item.type)"
                      :placeholder="t('placeholder.prefix') + t(item.label)"
                      v-model="form[item.field]"
                      class="bg-white hover:bg-white border-0"
                    >
                    </a-input>
                    <a-radio-group
                      v-if="['radio'].includes(item.type)"
                      v-model="form[item.field]"
                      :options="item.options"
                    >
                      <template #label="{ data }">
                        <span>{{ t(data.label) }}</span>
                      </template>
                    </a-radio-group>
                    <a-select
                      v-if="['select'].includes(item.type)"
                      size="small"
                      :options="item.options"
                      v-model="form[item.field]"
                      :placeholder="t('placeholder.prefix') + t(item.label)"
                      class="bg-white mr-1 hover:bg-white"
                    />
                    <a-cascader
                      v-if="['cascader'].includes(item.type)"
                      :options="item.options"
                      :default-value="form.city"
                      expand-trigger="hover"
                      class="bg-white mr-1 hover:bg-white"
                      :placeholder="t('placeholder.prefix') + t(item.label)"
                    />
                    <a-date-picker
                      v-if="['date'].includes(item.type)"
                      v-model="form[item.field]"
                      class="bg-white hover:bg-white border-0"
                    >
                    </a-date-picker>
                  </a-form-item>
                </template>
              </a-descriptions-item>
            </a-descriptions>
            <div class="p-5 w-2/3 m-auto">
              <div class="mb-5 text-center">
                <a-checkbox v-model="form.policyAgree">
                  <a
                    href=""
                    _target="_blank"
                    class="border-b border-gray-500"
                    >{{ t("customer.policy") }}</a
                  >
                </a-checkbox>
              </div>
              <a-button
                type="primary"
                class="h-12 font-bold text-lg"
                shape="round"
                html-type="submit"
                long
              >
                {{ t("modal.footer.create") }}
              </a-button>
            </div>
          </div>
        </a-form>
        <a-spin
          dot
          class="absolute top-56 left-0 right-0 m-auto"
          style="width: 100px"
          v-if="loading"
        />
      </div>
    </a-drawer>
  </div>
</template>

<style scoped lang="less"></style>
